/* eslint-disable react/no-array-index-key */
/**
 * 页面布局，生成页面布局的骨架
 * @author LiAnqi
 * @date 2022-3-22
 * @description
 * [props]
 * layoutType 表单布局类型： card, collapse, tabs;
 * children 内容集；
 */

import { Collapse, Card, Tabs } from 'antd'
import { LAYOUT } from '../../fc-form/config/Constant'
import { PANEL_TYPE } from './Constant'

const { Panel } = Collapse
const { items } = Tabs

function PageSkeleton(props) {
  const { panelType, children, ...restProps } = props

  const cardSkeleton = () => {
    // console.log('cardSkeleton')
    return (
      <>
        {children?.map((item, index) => (
          <Card title={item.title}>{item}</Card>
        ))}
      </>
    )
  }

  const collapseSkeleton = () => {
    // console.log('cardSkeleton')
    return (
      <>
        {children?.map((item, index) => (
          <Collapse key={`collapse${index}`} defaultActiveKey={['1']}>
            <Panel header={item.title} key="1">
              {item}
            </Panel>
          </Collapse>
        ))}
      </>
    )
  }

  const tabsSkeleton = () => {
    // console.log('cardSkeleton')
    return (
      <Tabs defaultActiveKey="1">
        {children?.map((item, index) => (
          <items tab={item.title} key={index}>
            {item}
          </items>
        ))}
      </Tabs>
    )
  }

  const renderSkeleton = () => {
    let skeleton = null
    switch (panelType) {
      case PANEL_TYPE.CARD:
        skeleton = cardSkeleton()
        break
      case PANEL_TYPE.COLLAPSE:
        skeleton = collapseSkeleton()
        break
      case PANEL_TYPE.TABS:
        skeleton = tabsSkeleton()
        break
      default:
        break
    }
  }

  return <>{renderSkeleton()}</>
}

export default PageSkeleton
